<template>
	<view>
		<view class="content">
			<view style="height: 240rpx;">
				<swiper class="swiper-box" @change="change" style="height: 200rpx;">
					<swiper-item v-for="(item ,index) in info" :key="index">
						<image style="width: 100%; height: 100%;" mode="aspectFit" :src="item.content"></image>
					</swiper-item>
				</swiper>
				<view class="dot-content">
					<view v-for="(item ,index) in info" :key="index" class="swiper-dot" :class="current === index? 'active':''">
					</view>
				</view>
			</view>
			<view class="menu-list">
				<view class="menu-items" v-for="(items, index) in menuList" :key="index" @click="choosePage(items.url)">
					<view class="menu-img">
						<image style="width: 100%; height: 100%;" mode="aspectFit" :src="items.img"></image>
					</view>
					<view class="menu-name"> {{ items.name }} </view>
				</view>
			</view>

		</view>
		<view class="sale-chart">
			<canvas canvas-id="canvasArea" id="canvasArea" class="charts" :style="{'width':'100%','height':'100%'}" @touchstart="touchIt($event,'canvasArea')"></canvas>
		</view>
		<view class="sales-statistics">
			<view class="sales-items" v-for="(items, index) in saleList" :key="index">
				<view class="sales-number"> {{ items.number }} </view>
				<view class="sales-name"> {{ items.name }} </view>
			</view>
		</view>
		<navigation-bar></navigation-bar>
	</view>
</template>

<script>
	import uCharts from '@/components/u-charts/u-charts.js';
	import navigationBar from '@/components/navigation-bar/index.vue';
	var _self;
	var canvasObj = {};
	export default {
		components: {
			navigationBar
		},
		data() {
			return {
				pixelRatio: 1,
				current: 0,
				mode: 'round',
				info: [{
					content: '/static/images/banner@3x.png'
				}, {
					content: '/static/images/banner@3x.png'
				}, {
					content: '/static/images/banner@3x.png'
				}],
				menuList: [{
					name: '订单查询',
					img: '/static/images/icon_pcgl@3x.png',
					url: '/pages/order/index'
				}, {
					name: '设备查询',
					img: '/static/images/icon_sbcx@3x.png',
					url: '/pages/device/index'
				}, {
					name: '设备维护',
					img: '/static/images/icon_sbwh@3x.png',
					url: '/pages/device/maintain'
				}, {
					name: '补货管理',
					img: '/static/images/icon_bhgl@3x.png',
					url: '/pages/replenish/index'
				}],
				saleList: [{
					name: '今日销售量',
					number: 2561
				}, {
					name: '本月销售额',
					number: 895223
				}, {
					name: '本月销售量',
					number: 22561
				}]
			}
		},
		created() {},
		onLoad() {
			_self = this;
			//#ifdef MP-ALIPAY
			uni.getSystemInfo({
				success: function(res) {
					if (res.pixelRatio > 1) {
						//正常这里给2就行，如果pixelRatio=3性能会降低一点
						//_self.pixelRatio =res.pixelRatio;
						_self.pixelRatio = 2;
					}
				}
			});
			//#endif
			this.cWidth = uni.upx2px(750);
			this.cHeight = uni.upx2px(500);

			//this.fillData(Data);
		},
		onReady() {
			let Area = {
				categories: ["08:00", "09:00", "10:00", "11:00", "12:00", "13:00", "14:00"],
				series: [{
					name: "今日销售额",
					data: [100, 95, 80, 150, 112, 132, 80],
					color: "#facc14",
				}]
			};
			this.showArea("canvasArea", Area);
		},
		methods: {
			change(e) {
				this.current = e.detail.current;
			},
			choosePage(page) {
				if (page) {
					const _this = this;
					uni.navigateTo({
						url: page + '?' + _this.version
					})
				}
			},
			showArea(canvasId, chartData) {
				canvasObj[canvasId] = new uCharts({
					$this: _self,
					canvasId: canvasId,
					type: 'area',
					fontSize: 11,
					padding: [0, 15, 10, 15],
					legend: {
						show: true,
						position: 'top',
						float: 'center',
						itemGap: 30,
						padding: 5,
						lineHeight: 18,
						margin: 0,
					},
					dataLabel: false,
					dataPointShape: true,
					background: '#FFFFFF',
					pixelRatio: _self.pixelRatio,
					categories: chartData.categories,
					series: chartData.series,
					animation: false,
					xAxis: {
						type: 'grid',
						gridColor: '#CCCCCC',
						gridType: 'dash',
						dashLength: 8,
						boundaryGap: 'justify' //两端不留白配置
					},
					yAxis: {
						gridType: 'dash',
						gridColor: '#CCCCCC',
						dashLength: 8,
						splitNumber: 5,
					},
					width: _self.cWidth * _self.pixelRatio,
					height: _self.cHeight * _self.pixelRatio,
					extra: {
						area: {
							type: 'curve',
							opacity: 0.2,
							addLine: true,
							width: 2
						}
					}
				});
			},
			touchIt(e, id) {
				canvasObj[id].touchLegend(e, {
					animation: false
				});
				canvasObj[id].showToolTip(e, {
					format: function(item, category) {
						if (typeof item.data === 'object') {
							return category + ' ' + item.name + ':' + item.data.value
						} else {
							return category + ' ' + item.name + ':' + item.data
						}
					}
				});
			},
		}
	}
</script>

<style>
	.content {
		padding: 30rpx 30rpx 0rpx 30rpx;
	}

	.menu-list {
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 30rpx 0;
	}

	.menu-items {
		flex: 1;
		text-align: center;

	}

	.menu-img {
		width: 72rpx;
		height: 72rpx;
		display: flex;
		align-content: center;
		margin: auto;
	}

	.menu-name {
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: rgba(51, 51, 51, 1);
	}

	.sale-chart {
		width: 100%;
		height: 500rpx;
	}

	.sales-statistics {
		display: flex;
		align-items: center;
		justify-content: center;
		border-top: 1rpx solid #E0E0E0;
		border-bottom: 1rpx solid #E0E0E0
	}

	.sales-items {
		flex: 1;
		text-align: center;
		padding: 60rpx 0rpx;
	}

	.sales-items:not(:last-child) {
		border-right: 1rpx solid #E0E0E0;
	}

	.sales-number {
		font-size: 48rpx;
		font-family: PingFang SC;
		font-weight: 300;
		color: rgba(51, 51, 51, 1);
	}

	.sales-name {
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: rgba(178, 178, 178, 1);
	}

	.dot-content {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 40rpx;
	}

	.swiper-dot {
		width: 10rpx;
		height: 10rpx;
		background: rgba(204, 204, 204, 1);
		border-radius: 50%;
	}

	.swiper-dot.active {
		width: 30rpx;
		border-radius: 5rpx;
		background: #999999
	}

	.dot-content .swiper-dot:not(:first-child) {
		margin-left: 10rpx;
	}
</style>
